<html>
<body>
<canvas id="c1" width="250" height="250"></canvas>
<canvas id="c2" width="250" height="250"></canvas>
<br>
<canvas id="c3" width="250" height="250"></canvas>
<canvas id="c4" width="250" height="250"></canvas>
<script type="text/javascript">
if (window.testRunner)
    testRunner.waitUntilDone();

function shouldNotBeCalled() {
    testFailed("Promise was rejected.");
    finishJSTest();
}

var canvas1 = document.getElementById('c1');
var canvas2 = document.getElementById('c2');
var canvas3 = document.getElementById('c3');
var canvas4 = document.getElementById('c4');
var bgcanvas = document.createElement('canvas');
bgcanvas.width = 100;
bgcanvas.height = 100;
var bgctx = bgcanvas.getContext('2d');
bgctx.fillStyle = 'green';
bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height);
var greenSquareURL = bgcanvas.toDataURL();
var img = new Image();
img.onload = imageLoaded;
img.src = greenSquareURL;
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');
var ctx4 = canvas4.getContext('2d');

function imageLoaded() {
    createImageBitmap(img).then(imageBitmapCallback(ctx1), shouldNotBeCalled);
    createImageBitmap(img,  -50,  -50, 100, 100).then(imageBitmapCallback(ctx2), shouldNotBeCalled);
    createImageBitmap(img,   50,   50, 100, 100).then(imageBitmapCallback(ctx3), shouldNotBeCalled);
    createImageBitmap(img, -100, -100, 300, 300).then(imageBitmapCallback(ctx4), shouldNotBeCalled);
}

var pending = 0;
function imageBitmapCallback(ctx) {
    pending++;
    var ctx = ctx;
    return function(imageBitmap) {
        pending--;
        ctx.drawImage(imageBitmap, -100, -100, 300, 300, -25, -25, 300, 300);
        ctx.drawImage(imageBitmap, -100, -100, 200, 200, -25, -25, 100, 100);
        ctx.drawImage(imageBitmap,    0, -100, 100, 200,  75, -25, 100, 100);
        ctx.drawImage(imageBitmap,    0, -100, 200, 200, 175, -25, 100, 100);
        ctx.drawImage(imageBitmap, -100,    0, 200, 100, -25,  75, 100, 100);
        ctx.drawImage(imageBitmap,    0,    0, 200, 100, 175, 75,  100, 100);
        ctx.drawImage(imageBitmap, -100,    0, 200, 200, -25, 175, 100, 100);
        ctx.drawImage(imageBitmap,    0,    0, 100, 200, 75,  175, 100, 100);
        ctx.drawImage(imageBitmap,    0,    0, 200, 200, 175, 175, 100, 100);
        if (!pending && window.testRunner)
            testRunner.notifyDone();
    }
}

</script>
</body></html>